<!DOCTYPE html>

<html xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>
	<style type="text/css">
.content {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.ui-layout,.ui-layout-doc,.ui-layout-unit,.ui-layout-wrap,.ui-layout-bd,.ui-layout-hd
	{
	border: none;
}

.companyHeaderGrid tr,.ui-widget-content .companyHeaderGrid tr {
	border: none;
}

.companyHeaderGrid td,.ui-widget-content .companyHeaderGrid td {
	border: none;
}

.ui-panelgrid tr,.ui-panelgrid td {
	border: none;
}

.buy-btn,.ui-widget-content .buy-btn {
	-moz-box-shadow: 0px 5px 7px 0px #608c3a;
	-webkit-box-shadow: 0px 5px 7px 0px #608c3a;
	box-shadow: 0px 5px 7px 0px #608c3a;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403
		), color-stop(1, #77a809));
	background: -moz-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: -webkit-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: -o-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: -ms-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403',
		endColorstr='#77a809', GradientType=0);
	background-color: #89c403;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #90c934;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: Trebuchet MS;
	font-size: 15px;
	font-weight: bold;
	padding: 4px 10px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #528009;
}

.buy-btn:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809
		), color-stop(1, #89c403));
	background: -moz-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: -webkit-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: -o-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: -ms-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809',
		endColorstr='#89c403', GradientType=0);
	background-color: #77a809;
}

.buy-btn:active {
	position: relative;
	top: 1px;
}
</style>
</h:head>

<h:body>
		<img class="content" src="#{resource['images/top.jpg']}" alt="immagine top"></img>

	<!-- Importo il css per la customizzazione della pagina -->
	<h:outputStylesheet name="css/custom.css" />

	<f:view contentType="text/html">
		<f:event type="preRenderView"
			listener="#{pacchettoBean.obtainListaAcquistatiCliente}" />
	</f:view>


	<p:layout fullPage="false" style=" min-width: 90%; min-height:600px;">

		<p:layoutUnit position="north"
			style="min-height:100px; font-size: 13pt">
			<p:toolbar>
				<p:toolbarGroup align="right">
					<h:form>
						<p:commandButton id="logoutButton" value="Logout"
							icon="ui-icon-play" action="#{logoutBean.logout()}" />
					</h:form>
				</p:toolbarGroup>
			</p:toolbar>
		</p:layoutUnit>



		<!-- START - ZONA SX DELLA PAGINA -->
		<p:layoutUnit position="west" collapsible="true" size="22%" gutter="0">

			<!-- #START LEFT-MENU Inserisco il menu laterale dall'opportuno file  -->
			<ui:insert name="left-menu">
				<div style="padding: 0px 0px 0px 0px">
					<ui:include src="left_menu.xhtml" />
				</div>
			</ui:insert>


		</p:layoutUnit>
		<!-- STOP - ZONA SX DELLA PAGINA -->

		<!-- START - ZONA DX DELLA PAGINA -->
		<p:layoutUnit position="center" style="padding-left: 10px">


			<h:form id="packet_filter_form">


				<p:panelGrid columns="6" styleClass="companyHeaderGrid"
					style="min-width: 100%">
					<f:facet name="header">  Filtra Pacchetti Acquistati  </f:facet>

					<h:outputLabel for="city" value="Citta: " />

					<p:autoComplete id="city" value="#{pacchettoBean.cittaSelezionata}"
						label="Citta Partenza" completeMethod="#{cittaBean.complete}"
						var="c" itemLabel="#{c.name}" minQueryLength="3" itemValue="#{c}"
						forceSelection="true" converter="cittaConverter">

						<p:ajax event="itemSelect" update="city" />

					</p:autoComplete>



					<h:outputLabel for="cat_select" value="Categoria: " />
					<p:autoComplete id="cat_select"
						value="#{pacchettoBean.categoriaSelezionata}" label="Categoria"
						completeMethod="#{pacchettoBean.complete}" var="cat"
						itemLabel="#{cat.descrizione}" minQueryLength="1"
						itemValue="#{cat}" forceSelection="true" converter="convertCat"
						requiredMessage="Inserire la categoria">
						<p:ajax event="itemSelect" update="cat_select" />
					</p:autoComplete>



					<p:outputPanel width="100%" style="margin: 10px 10px 10px 10px">
						<h:outputText id="displayRange" value="Prezzo da a "
							style="padding: 5px" />
						<p:slider for="txt6,txt7" display="displayRange"
							style="width:100%" range="true"
							displayTemplate="Prezzo da {min} a {max}" step="50"
							maxValue="#{pacchettoBean.macPrezzoPack}" minValue="0" />
					</p:outputPanel>

					<h:inputHidden id="txt6" value="#{pacchettoBean.prezzoMin}" />

					<h:outputLabel for="dataPartenza" value="Data Partenza" />
					<p:calendar id="dataPartenza" label="Data Partenza"
						pattern="dd/MM/yyyy" binding="#{dataPart}" showButtonPanel="true"
						pages="2" value="#{pacchettoBean.dataPartenza}">
						<p:ajax event="dateSelect" update="dataPartenza, dataRitorno" />

					</p:calendar>

					<h:outputLabel for="dataRitorno" value="Data Ritorno" />
					<p:calendar id="dataRitorno" label="Data Ritorno"
						showButtonPanel="true" pages="2" pattern="dd/MM/yyyy"
						value="#{pacchettoBean.dataRitorno}">
						<p:ajax event="dateSelect" update="dataRitorno" />
					</p:calendar>

					<h:inputHidden id="txt7" value="#{pacchettoBean.prezzoMax}" />
					<h:inputHidden />
					<f:facet name="footer">
						<p:commandButton value="Filtra" icon="ui-icon-check"
							style="margin:0"
							actionListener="#{pacchettoBean.filtraPacchetti}"
							update=":packet_list_form" />
					</f:facet>

				</p:panelGrid>

			</h:form>


			<h:form id="packet_list_form">
				<!-- START - Tabella dei pacchetti -->

				<p:dataTable value="#{pacchettoBean.listaPacchettiFiltrati}"
					var="packet" id="cars" rowSelectMode="single" rows="10"
					selectionMode="single" sortMode="multiple"
					selection="#{pacchettoBean.pacchettoSelezionato}"
					rowKey="#{packet.citta}" scrollable="true" liveScroll="true"
					scrollHeight="100">

					<!-- Definisco cosa deve fare con la selezione -->
					<p:ajax event="rowSelect"
						oncomplete="window.location.href='packet_detail_acquistato.xhtml'" />



					<f:facet name="header"> Pacchetti Acquistati </f:facet>

					<p:column>
						<f:facet name="header"> Citta </f:facet> 
                     		#{packet.citta.name}
				</p:column>

					<p:column>
						<f:facet name="header"> Prezzo </f:facet>
                    		 #{packet.prezzoScontato}
				</p:column>

					<p:column>
						<f:facet name="header"> Sconto </f:facet>
                     		#{packet.sconto}%
				</p:column>

					<p:column>
						<f:facet name="header"> Descrizione </f:facet>
                     		#{packet.descrizione_categoria}
				</p:column>

					<p:column>
						<f:facet name="header"> Data Partenza </f:facet>
                     		#{packet.dataPartenzaAsString}
				</p:column>

					<p:column>
						<f:facet name="header"> Data Ritorno </f:facet>
                     		#{packet.dataRitornoAsString}
				</p:column>

				</p:dataTable>

				<!-- END - Tabella dei pacchetti -->

			</h:form>


		</p:layoutUnit>
		<!-- STOP - ZONA DX DELLA PAGINA -->

	</p:layout>
		<img class="content" src="#{resource['images/bottom.jpg']}" alt="immagine top"></img>

</h:body>
</html>